<script setup>
// props: ['currentIndex']
const props = defineProps(['currentIndex'])
const emits = defineEmits(['changeTabbar'])

// axios get tabbarList 
//数据
const tabbarList = [
    {icon: '&#xe651;', text: '首页', to: {path: '/home'}},
    {icon: '&#xe690;', text: '购物车', to: {path: '/cart'}},
    {icon: '&#xe655;', text: '订单', to: {path: '/order'}},
    {icon: '&#xe60b;', text: '我的', to: {path: '/my'}},
]

const handleClick = (index) => {
    emits('changeTabbar', index)
}
</script>

<template>
  <!-- 底部tabbar -->
  <div class="tabbar">
        <div 
            class="tabbar_item" 
            :class="{ 'tabbar_item--active' : props.currentIndex == index}" 
            v-for="(item, index) in tabbarList" 
            :key="item.text"
            @click="handleClick(index)"
        >
            <RouterLink :to="item.to">
                <span class="iconfont" v-html="item.icon"></span>
                <span class="tabbar_title">{{ item.text }}</span>
            </RouterLink>
        </div>
    </div>
   
</template>

<style lang="scss" scoped>
@import '@/style/viriables.scss';

.tabbar {
    width: 100%;
    height: .49rem;
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: .01rem solid $content_bgColor;
    display: flex;

    // .tabbar_item
    &_item {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;

        a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            color: $content_fontcolor;
            
        }
        //活动样式
        &--active {
            a {
                color: #1FA4FC;
            }
        }
    }
}
</style>